<template>
    <div class="worksMain">
        <div class="position">
            <div class="sub"><em>Main works of industrial design</em>  ID作品</div>
            <div class="title">月度优秀作品</div>
        </div>
        <el-carousel :autoplay="false" :initial-index="initIndex" indicator-position="none" class="swiper_bd" ref="mySilder">
            <el-carousel-item v-for="(item,index) in list" :key="index">
                <ul>
                    <li>
                        <el-carousel :autoplay="false" direction="vertical" height="700px" arrow="never" class="swiper_child">
                            <el-carousel-item v-for="(detail,index3) in item.url" :key="index3">
                                <template v-if="$route.params.id">
                                    <img v-if="$route.params.id == index" :src="detail+'&spec=1000'" :preview="index" :preview-text="item.title" style="width:100%; height:100%;object-fit:cover;">
                                    <img v-else src="http://mysolex/template/elec_201706_block/style/logo.png" :preview="index" :preview-text="item.title" style="width:100%; height:100%;object-fit:contain;">
                                </template>
                                <template v-else>
                                    <img :src="detail+'&spec=1000'" :preview="index" :preview-text="item.title" style="width:100%; height:100%;object-fit:cover;">
                                </template>
                                
                            </el-carousel-item>
                        </el-carousel>

                        <div class="info">
                            <span class="txt">作品说明</span>
                            <div class="box">
                                <div class="path">
                                    <span>{{item.path}}</span>
                                </div>
                                <h1>{{item.title}}</h1>
                                <div class="author">{{item.author}}</div>
                                <div class="desc"><label>设计说明：</label>{{item.desc}}</div>
                            </div>
                        </div>

                        <div class="num">
                            <span v-if="initIndex+1 > 9 || index+1>9">
                                {{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                            <span v-else>
                                0{{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                        </div>
                    </li>
                </ul>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import { works_data } from '@/assets/js/getData';
    import { mapState } from 'vuex';
    export default {
        name: 'worksMain',
        data(){
            return {
                date:'',
                list:[],
                swiperIndex:0,
                active:0,
                timer: null,
                interval:5000,
                initIndex:0,
            }
        },
        computed:{
            ...mapState([
                'baseInfo'
            ]),
            isLoad:function(){
                return this.baseInfo.year;
            }
        },
        watch:{
            isLoad:function(val){
                if(val){
                    this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                    this.init();
                }
            },
            $route(){
                this.$refs.mySilder.setActiveItem(this.$route.params.id);
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
        },
        mounted(){
            if(this.$route.params.id){
                this.initIndex = parseInt(this.$route.params.id)
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
            if(this.baseInfo.year){
                this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                this.init();
            }
        },
        methods:{
            async init(){
                const res = await works_data({data:encodeURI(JSON.stringify({yf:this.date,zplb:'0',pxfl:'0'}))});
                if(res.code == '0'){
                    this.list = res.data;
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .worksMain{position: relative;height:100%;}

    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .swiper_bd{height:100%;}
    .swiper_bd >>> .el-carousel__container{height:100%;}
    .swiper_bd >>> .el-carousel__arrow{width:60px;height:60px;font-size:24px;}
    .swiper_bd >>> .el-carousel__arrow i{font-weight:bold;}
    .swiper_bd >>> .el-carousel__arrow--left{left:40px;}
    .swiper_bd >>> .el-carousel__arrow--right{right:40px;}
    .swiper_bd ul{position: relative;z-index:9;height:100%;width:1132px;margin:0 auto;}
    .swiper_bd ul li{width:100%;float: left;height:100%;position: relative;}
    .swiper_bd ul li .num{color:#353942;font-size:16px;position: absolute;right:-16px;bottom:16px;font-family: SimSun Regular, SimSun Regular-Regular;line-height:20px;}
    .swiper_bd .info{width:20px;text-align:center;position: absolute;top:106px;right:30px;font-size:12px;cursor: pointer;z-index:9;}
    .swiper_bd .info .txt{background:#5B8CFF;color:#fff;line-height:14px;display:inline-block;padding:5px 0;position: relative;z-index:9;}
    .swiper_bd .info .txt:hover{background:#4e81f7;}
    .swiper_bd img{cursor: pointer;}
    .swiper_bd .info .box{width:320px;min-height:100px;position: absolute;top:0;right:10px;background:url(../../assets/img/ft.png) no-repeat center bottom;text-align:left;padding:30px 30px 36px;box-sizing:border-box;display:none;}
    .swiper_bd .info:hover .box{display:block;}
    .swiper_bd .info .box::before{content:"";position: absolute;height:40px;background:url(../../assets/img/hd.png) no-repeat center top;width:100%;left:0;top:-40px;}
    .swiper_bd .info .path{margin-top:-40px;}
    .swiper_bd .info .path span{padding:0 8px;height: 22px;line-height:22px;background: #f1f4f7;font-size:12px;text-align:center;position: relative;display:inline-block;}
    .swiper_bd .info .path span:after{content:"";border-top:11px solid transparent;border-bottom:11px solid transparent;
    border-left:11px solid #f1f4f7;position: absolute;right:-11px;top:0;}
    .swiper_bd .info h1{font-size:32px;font-weight:400;margin-top:10px;}
    .swiper_bd .info .author{font-size:20px;margin-top:40px;}
    .swiper_bd .info .desc{color: #7987A3;line-height:22px;margin-top:16px;}
    .swiper_bd .info .desc label{color: #333;}

    .swiper_child{padding:0 30px;margin-top:60px;}
    .swiper_child >>> .el-carousel__indicators--vertical{bottom:0;top:auto;transform:translateY(0);}
    .swiper_child >>> .el-carousel__indicators--vertical .el-carousel__button{width:8px;height:8px;background:#333;}
</style>